<template>
  <div class="wrapper-record" :style="{'-webkit-overflow-scrolling': scrollMode}">
    <no-data v-if="recordList && recordList.length === 0" :content="noContent"></no-data>
    <div class="page-loadmore-wrapper" v-else>
      <!-- :top-method="loadTop"
       @top-status-change="handleTopChange" -->
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        @bottom-status-change="handleBomChange"
        :autoFill="false"
        ref="loadmore">
        <div v-for="(item, index) in recordList" :key="index" class="rank-list">
          <div class="record-item">
            <div class="record-timeline">{{ item.createDate | parseTime }}</div>
            <div class="record-content">
              <div class="record-title">捐赠了<span style="color: #F56D7B;">{{ item.amount }}</span>个专注豆</div>
              <!-- <div class="record-tip">捐赠项目：小拖把小学</div> -->
            </div>
          </div>
        </div>
        <!-- <div slot="top" class="mint-loadmore-top">
          <span v-if="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <mt-spinner type="fading-circle" v-if="topStatus === 'loading'"></mt-spinner>
        </div> -->
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-if="bomStatus !== 'loading'" :class="{ 'is-rotate': bomStatus === 'drop' }">加载更多...</span>
          <mt-spinner type="fading-circle" v-if="bomStatus === 'loading'"></mt-spinner>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'
import noData from '../components/no-data.vue'
import { parseTime } from '../utils'

export default {
  components: {
    noData,
  },
  filters: {
    parseTime(val) {
      if (val) {
        return parseTime(val, '{y}/{m}/{d} {h}:{i}')
      }
      return val;
    },
  },
  data () {
    return {
      pageNum: 0,
      pageSize: 15,
      total: 0,
      recordList: [],
      allLoaded: false,
      scrollMode: 'auto', // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      // topStatus: '',
      bomStatus: '',
      noData: false,
      noContent: '暂无捐赠记录',
    }
  },
  methods: {
    // loadTop() {
    //   // 加载更多数据
    //   setTimeout(() => {
    //     this.pageNum = 0;
    //     this.allLoaded = false;
    //     this.recordList.splice(0, this.recordList.length);
    //     this.recordList = [];
    //     this.getResultList();
    //     this.$refs.loadmore.onTopLoaded();
    //   }, 500);
    // },
    // handleTopChange(status) {
    //   this.topStatus = status;
    // },
    loadBottom() {
      // 加载更多数据
      setTimeout(() => {
        this.pageNum += 1;
        this.getResultList();
        this.$refs.loadmore.onBottomLoaded();
      }, 500);
    },
    handleBomChange(status) {
      this.bomStatus = status;
    },
    getResultList() { 
      this.scrollMode = 'touch';
      this.handleBomChange("loading");
      request('/delay/api/welfare/history', 'GET', {
        current: this.pageNum,
        size: this.pageSize,
      }).then(res => {
        console.log(res)
        if (res.state === 0) {
          const tmp = res.data.content
          tmp.forEach(record => this.recordList.push(record));
          this.total = res.data.total
          if (this.total === 0) this.noData = true;
          // 若数据已全部获取完毕
          if (this.total <= this.recordList.length) this.allLoaded = true;
        }
      })
     }
  },
  mounted() {
    this.getResultList();
  }
}
</script>

<style lang="less" scoped>
.page-loadmore-wrapper {
  height:100%;
  overflow: scroll;
}
// .mint-loadmore-top span {
//     display: inline-block;
//     -webkit-transition: .2s linear;
//     transition: .2s linear;
//     vertical-align: middle
// }
// .mint-loadmore-top span.is-rotate {
//   transform: rotate(180deg);
// }
.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
}
.mint-loadmore-bottom span.is-rotate {
  transform: rotate(180deg);
}
.wrapper-record {
  background: #fff;
  color: #727E89;
  .mint-spinner-fading-circle{
    margin: 0 auto;
  }
  .mintui {
    font-size: 44px;
  }
}
.record-top {
  background: #F2F6F9;
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #727E89;
  padding: 9px 32px;
}
.record-day {
  margin: 26px 32px;
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #727E89;
}
.record-timeline {
  background: #F9FAFA;
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #727E89;
  padding: 4px 32px;
}
.record-content {
  margin: 28px 32px;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #727E89;
}
.record-title {
  color: #727E89;
  margin-bottom: 6px;
}
.record-tip {
  color: #727E89;
  opacity: 0.5;
}
</style>